<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3 Demo</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body >
  <svg id='svg' width="500" height="500" style="background-color: #efefef;">
   
  </svg>
  <script>
    // 线性比例尺
    // var scale = d3.scaleLinear().domain([0, 5]).range([1, 100])
    // console.log(scale(1))
    // console.log(scale(2))
    // console.log(scale(3))
    // console.log(scale(4))
    // console.log(scale(5))

    // 序数比例尺
    let scale = d3.scaleBand().domain([1, 2, 3, 4]).range([0, 100])
  </script>
</body>
</html>